<template>
    <div class="app-container">
        <el-form :model="searchForm" inline ref="searchForm" label-width="90px">
            <el-form-item label="昵称：" prop="LIKE_nickName">
                <el-input v-model="searchForm.LIKE_nickName" clearable placeholder="请输入昵称"></el-input>
            </el-form-item>
            <el-form-item label="手机：" prop="LIKE_phone">
                <el-input v-model="searchForm.LIKE_phone" clearable placeholder="请输入手机"></el-input>
            </el-form-item>
            <el-form-item label="地区：" prop="EQ_districtId">
                <el-cascader clearable :options="districtList" :props="optionProps" v-model="EQ_districtId" change-on-select style="width: 100%;"></el-cascader>
            </el-form-item>
            <el-form-item label="注册时间：">
                <el-date-picker v-model="searchForm.GTE_createTime" clearable type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="注册时间开始"></el-date-picker>
                <el-date-picker v-model="searchForm.LTE_createTime" clearable type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="注册时间结束"></el-date-picker>
            </el-form-item>
            <el-form-item label="">
                <el-button @click="init('search')" type="primary">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column label="头像" align="center">
                <template slot-scope="scope">
                    <!-- <img v-if="scope.row.profilePhoto" width="50" height="50" alt="/头像" :src="scope.row.showpic" @click="enlargeFun(scope.row.showpic)"> -->
                    <img v-if="scope.row.profilePhoto" width="50" height="50" alt="/头像" :src="scope.row.profilePhoto" @click="enlargeFun(scope.row.profilePhoto)">
                    <img v-else src="@/assets/image/default.png" width="50" height="50" alt="/图片">
                </template>
            </el-table-column>
            <el-table-column prop="nickName" label="昵称" align="center" width="110"></el-table-column>
            <el-table-column prop="sex" :formatter="sexFil" label="性别" align="center"></el-table-column>
            <el-table-column prop="phone" label="手机" align="center" width="110"></el-table-column>
            <el-table-column prop="birthday" label="生日" align="center" width="100"></el-table-column>
            <el-table-column prop="email" label="邮箱" align="center" width="160"></el-table-column>
            <el-table-column prop="locked" :formatter="lockedFun" label="锁定状态" align="center"></el-table-column>
            <el-table-column prop="createTime" label="注册时间" align="center" width="160"></el-table-column>
            <el-table-column label="操作" width="260" fixed="right" align="center">
                <template slot-scope="scope">
                    <el-button @click.stop="lockClick(scope.row)" type="warning" plain size="mini">{{(scope.row.locked == 0) ? '锁定' : '解锁'}}</el-button>
                    <el-button @click.stop="resetClick(scope.row)" type="warning" plain size="mini">重置密码</el-button>
                    <el-button @click.stop="detailClick(scope.row)" plain size="mini">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @current-change="getList" layout="total, prev, pager, next, jumper" :total="pageData.totalElements" style="padding-top: 20px"></el-pagination>
        <!-- 图片弹框 -->
        <el-dialog :visible.sync="showPicDialog" width="1000px">
            <img :src="nowPic" alt="" style="max-width: 100%;margin: 0 auto 15px;display: inherit" />
        </el-dialog>
        <!-- 详情弹框 -->
        <el-dialog :visible.sync="showDialog" width="800px">
            <el-tabs type="border-card">
                <el-tab-pane label="基本信息">
                    <el-form ref="dataForm" :model="dataForm" label-position="left" label-width="110px" style="margin: 0px 50px;">
                        <el-form-item label="昵称：" prop="nickName">
                            <el-input v-model="dataForm.nickName" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="性别：" prop="sex">
                            <el-input v-model="dataForm.sex" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="手机：" prop="phone">
                            <el-input v-model="dataForm.phone" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="生日：" prop="birthday">
                            <el-input v-model="dataForm.birthday" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱：" prop="email">
                            <el-input v-model="dataForm.email" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="地区：" prop="districtId">
                            <el-input v-model="dataForm.districtId" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="锁定状态：" prop="locked">
                            <el-input v-model="dataForm.locked" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="微信绑定状态：" prop="weChatBound">
                            <el-input v-model="dataForm.weChatBound" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="安全等级：" prop="safetyLevel">
                            <el-input v-model="dataForm.safetyLevel" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="备注：" prop="remarks">
                            <el-input v-model="dataForm.remarks" type="textarea" :rows="4" disabled></el-input>
                        </el-form-item>
                        <!-- <el-form-item>
                            <el-button @click="addSubmit('dataForm')" type="primary">保存</el-button>
                            <el-button @click="cancelClick('dataForm')">取消</el-button>
                        </el-form-item> -->
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="角色信息">
                    <el-table :data="roleData" style="width: 100%;margin: 20px 0px;" border>
                        <el-table-column prop="roleName" label="名称" width="200px" align="center"></el-table-column>
                        <el-table-column prop="description" label="描述" show-overflow-tooltip align="center"></el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="足迹" style="min-height: 400px;margin-top: 30px;">
                    <el-tabs tab-position="left" v-model="actived" @tab-click="handleClick">
                        <el-tab-pane label="看过的商家" name="2"></el-tab-pane>
                        <el-tab-pane label="约过的商家" name="3"></el-tab-pane>
                        <el-tab-pane label="关注的商家" name="1"></el-tab-pane>
                        <el-table :data="merchantRoleData" style="width: 100%;margin: 20px 0px;" border>
                            <el-table-column prop="companyName" label="公司" align="center"></el-table-column>
                            <el-table-column prop="merchantTypeName" label="加盟商类型" align="center"></el-table-column>
                            <el-table-column prop="servicePhone" label="服务电话" align="center"></el-table-column>
                            <el-table-column prop="principal" label="负责人" align="center"></el-table-column>
                            <el-table-column prop="principalPhone" label="负责人电话" align="center"></el-table-column>
                            <el-table-column prop="districtName" label="区域" show-overflow-tooltip align="center"></el-table-column>
                            <el-table-column prop="authorizationTime" label="授权时间" width="160px" align="center"></el-table-column>
                            <el-table-column prop="startTime" label="加盟开始时间" width="160px" align="center"></el-table-column>
                            <el-table-column prop="endTime" label="加盟过期时间" width="160px" align="center"></el-table-column>
                        </el-table>
                        <!-- 分页 -->
                        <el-pagination @current-change="merchantGetList" layout="total, prev, pager, next, jumper" :total="merchantPageData.totalElements" style="padding-top: 20px"></el-pagination>
                    </el-tabs>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>
<script>
import { findDistrictAllRegion } from '@/api/system/district-module/region'
import { findSysUserPageRecord, detailSysUserRecord, lockedSysUserRecord,getSysUserRecord,findRoleListRecord,initPasswordRecord, editSysUserRecord, safeLevelSysUserRecord, weChatBindSysUserRecord, weChatUnbindSysUserRecord } from '@/api/user-management/sys-user'
import { findPageMerchantUser } from '@/api/service-provider/merchant-relation-user'
import { uploadPic, getPic } from '@/api/uploadPic'
export default {
    name: 'Profile',
    data() {
        return{
            searchForm: {
                LIKE_nickName: '',
                LIKE_phone: '',
                GTE_createTime: '',
                LTE_createTime: '',
                EQ_districtId: ''
            },
            EQ_districtId: [],
            tableData: [],
            nowTit: '',
            showDialog: false,
            dataForm: {
                nickName: '',
                sex: '',
                phone: '',
                birthday: '',
                email: '',
                districtId: '',
                locked: '',
                weChatBound: '',
                safetyLevel: '',
                remarks: '',
            },
            pageSize: 10,
            pageData: {},
            nowId: '',
            nowPage: 0,
            merchantNowPage: 0,
            merchantPageSize: 10,
            showPicDialog: false,
            nowPic: '',
            districtId: [],
            districtList: [],
            optionProps: {
                value: 'id',
                label: 'name',
                children: 'children'
            },
            sexOpt: [
                {value: 1, label: '男'},
                {value: 0, label: '女'},
            ],
            lockedOpt: [
                {value: 0, label: '锁定'},
                {value: 1, label: '解锁'},
            ],
            roleData: [],
            actived: '2',
            merchantPageData: {},
            merchantRoleData: []
        }
    },
    methods: {
        init(params){
            const _this = this;
            if(params == 'search'){
                _this.nowPage = 0
            }
            let cid = '';
            if(this.EQ_districtId.length != 0){
                cid = this.EQ_districtId[(parseInt(this.EQ_districtId.length)) - 1];
            }
            _this.tableData = [];
            findSysUserPageRecord( _this.nowPage, _this.pageSize, _this.searchForm.LIKE_phone, _this.searchForm.LIKE_nickName, _this.searchForm.GTE_createTime, _this.searchForm.LTE_createTime, cid ).then(response => {
                if(response.code == 200){
                    _this.pageData = response.object
                    _this.tableData = response.object.content
                    // if(response.object.content){
                    //     for (const key in response.object.content) {
                    //         if(response.object.content[key].profilePhoto){
                    //             getPic(response.object.content[key].profilePhoto).then(res => {
                    //                 if(res.code == 200){
                    //                     response.object.content[key].showpic = res.object;
                    //                     _this.tableData.push(response.object.content[key]);
                    //                 }else{
                    //                     this.$message.error(res.message);
                    //                 }
                    //             })
                    //         }else{
                    //             response.object.content[key].showpic = '';
                    //             _this.tableData.push(response.object.content[key]);
                    //         }
                    //     }
                    // }
                }else{
                    this.$message.error(response.message);
                }
            })
        },
        districtFun(){
            const _this = this;
            //获取列表信息
            findDistrictAllRegion().then(response => {
                if(response.code == 200){
                    _this.districtList = _this.getTreeData(response.object);
                }else{
                    this.$message.error(response.message);
                }
            })
        },
        //递归
        getTreeData(data){
            for(var i=0;i<data.length;i++){
                if((data[i].children == null) || (data[i].children.length<1)){
                    data[i].children=undefined;
                }else {
                    this.getTreeData(data[i].children);
                }
            }
            return data;
        },
        //锁定
        lockClick(row){
            let usingStatus,isUsing;
            if(row.locked == 1){  //启用状态
                usingStatus = 0;
                isUsing = '解锁';
            }else if(row.locked == 0){
                usingStatus = 1;
                isUsing = '锁定';
            }
            const _this = this;
            this.$confirm('确定 '+ isUsing + row.nickName +' 的用户信息吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //启用禁用
                lockedSysUserRecord(row.id, usingStatus ).then(response => {
                    if(response.code == 200){
                        this.$message.success(response.message);
                        _this.init();
                    }else{
                        this.$message.error(response.message);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });
        },
        //详情
        detailClick(row){
            const _this = this;
            this.nowId = row.id
            this.merchantUserList(row.id)
            //角色
            findRoleListRecord(row.id).then(response => {
                if(response.code == 200){
                    this.roleData = response.object;
                }else{
                    this.$message.error(response.message);
                }
            })
            
            this.dataForm.nickName = row.nickName;
            if(row.sex == 0){
                this.dataForm.sex = '女';
            }else if(row.sex == 1){
                this.dataForm.sex = '男';
            }
            this.dataForm.phone = row.phone;
            this.dataForm.birthday = row.birthday;
            this.dataForm.email = row.email;
            this.dataForm.districtId = row.districtId;
            if(row.locked == 0){
                this.dataForm.locked = '未锁定';
            }else if(row.locked == 1){
                this.dataForm.locked = '锁定';
            }
            if(row.weChatBound == 0){
                this.dataForm.weChatBound = '未绑定';
            }else if(row.weChatBound == 1){
                this.dataForm.weChatBound = '绑定';
            }
            this.dataForm.safetyLevel = row.safetyLevel;
            this.dataForm.remarks = row.remarks;
            this.showDialog = true;
        },
        // 查询用户关联的商家
        merchantUserList(userId){
            const _this = this
            findPageMerchantUser(this.merchantNowPage, this.merchantPageSize,userId,this.actived).then(response => {
                if(response.code == 200){
                    _this.merchantPageData = response.object
                    _this.merchantRoleData = response.object.content
                }else{
                    this.$message.error(response.message);
                }
            })
        },
        // 切换关联商家
        handleClick(){
            this.merchantNowPage = 0
            this.merchantUserList(this.nowId)
        },
        //分页
        merchantGetList(val) {
            this.merchantNowPage = val - 1;
            this.merchantUserList();
        },
        //重置密码
        resetClick(row){
            const _this = this;
            this.$confirm('确定重置密码吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //请求
                initPasswordRecord(row.id).then(response => {
                    if(response.code == 200){
                        this.$message.success(response.message);
                        _this.init();
                    }else{
                        this.$message.error(response.message);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });    
            });
        },
        //取消
        cancelClick(formName){
            this.showDialog = false;
            this.$refs[formName].resetFields();
        },
        //分页
        getList(val) {
            this.nowPage = val - 1;
            this.init();
        },
        sexFil(row){
            if(row.sex == 1){
                return '男'
            }else if(row.sex == 0){
                return '女'
            }
        },
        lockedFun(row){
            if(row.locked == 0){
                return '未锁定'
            }else if(row.locked == 1){
                return '锁定'
            }
        },
        //放大图片
        enlargeFun(pic){
            this.showPicDialog = true;
            this.nowPic = pic;
        },
    },
    mounted(){
        this.init();
        this.districtFun();
    },
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
